<!--
 * @Author: 369886629@qq.com 369886629@qq.com
 * @Date: 2025-03-11 16:40:14
 * @LastEditors: 369886629@qq.com 369886629@qq.com
 * @LastEditTime: 2025-03-28 09:06:21
 * @FilePath: \sqeybusiness-h5\src\views\home\rechargerecord.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="recharge-record-page">
        <!-- 导航栏 -->
        <van-nav-bar title="消费记录" left-arrow @click-left="goBack" />
        <!-- 表头 -->
        <div class="table-header">
            <div class="header-item" style="width:40%;">时间</div> 
            <div class="header-item" style="width:30%;">项目</div>
            <div class="header-item" style="width:30%;">金额</div>
        </div>
        <!-- 记录列表 -->
        <div v-if="rechargeRecords && rechargeRecords.length > 0 " class="no-record-tip">
            <div v-for="(record, index) in rechargeRecords" :key="index" class="record-item">
                <div class="record-item-content">
                    <div style="width:40%;">{{formatDate(record.jdsj) }}</div>
                    <div style="width:30%;">{{'购买商机'}}</div>
                    <div style="width:30%;">{{ record.price }}元</div>
                </div>
            </div>
        </div>
        <!-- 没有更多提示 -->
        <van-empty v-else description="暂无消费记录" />
        </div>
    </template>
    
<script>
    import { queryOrderinfoList } from '@/api/api';
        export default {
    data() {
        return {
            rechargeRecords: [],
            hyid:undefined,
            pageNum: 1,
            pageSize: 30
        };
    },
    created() {
        let that = this
        this.hyid =  localStorage.getItem('hyid') ?  localStorage.getItem('hyid'):this.$route.query.hyid
        this.queryOrderinfoList()
        },
        mounted() {
            // 可以在这里添加初始化逻辑
            window.addEventListener('scroll', this.handleScroll);
        },

        beforeDestroy() {
            // 移除滚动事件监听，防止内存泄漏
            window.removeEventListener('scroll', this.handleScroll);
        },
        methods: {
            handleScroll(){
                let that = this
                const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
                if (scrollTop + clientHeight >= scrollHeight -5 ) {
                    that.pageNum = that.pageNum + 1;
                    that.queryOrderinfoList()
                }
            },
            queryOrderinfoList() {
                let param = {
                    hyid: this.hyid,
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    zfzt:'1'
                }
                console.log(param)
                queryOrderinfoList(param).then(res => {
                    if (res.code == 200) {
                        this.rechargeRecords = this.pageNum == 1 ?  res.rows: this.rechargeRecords.concat(res.rows) 
                    }
                })
            },
            goBack() {
                // 处理返回上一页逻辑，比如使用路由返回
                this.$router.back();
            },
                formatDate(dateStr) {
                    const date = new Date(dateStr)
                    const now = new Date()
                    // 判断是否为今天
                    if (date.getDate() === now.getDate() &&
                        date.getMonth() === now.getMonth() &&
                        date.getFullYear() === now.getFullYear()) {
                        // 今天显示时分
                        return `今天 ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`
                    }
                    // 非今天显示完整日期
                    return `${date.getFullYear()}-${this.padZero(date.getMonth() + 1)}-${this.padZero(date.getDate())} 
                            ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`
                },
                padZero(num) {
                    return num.toString().padStart(2, '0')
                },
            }
        };
    </script>
    
    <style scoped>
    .recharge-record-page {
        background-color: #fff;
    }
    .table-header {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content:center;
        font-weight: bold;
        margin-bottom: 15px;
    }
    .header-item {
        text-align: center;
        width:33%;
        font-size: 14px;
        padding-top: 10px;
    }

    .record-item {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        padding: 10px 0;
        border-bottom: 1px solid #e4e7ed;
        align-items: center;
        color: #303133;;
        margin-top: 10px;
    }
    .record-item-content {
        flex: 1;
        text-align: center;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
        width:33%;;
        font-size: 13px;
    }
    .no-more-tip {
        text-align: center;
        color: #999;
        margin-top: 20px;
        padding-bottom: 20px;
    }
    </style>